<template>
  <el-alert
    v-if="showAnnouncement"
    type="info"
    :closable="true"
    @close="closeAnnouncement"
    class="announcement"
  >
    <div class="announcement-content">
      <el-icon class="announcement-icon"><Bell /></el-icon>
      <span class="announcement-text">
        公告：新项目：
        <router-link to="/column/xiaohatu" class="announcement-link">《小哈兔》(微服务架构)</router-link>
        正在更新中... 博客项目 2 期已经完结 即将开球内部<router-link to="/column/specialty" class="announcement-link">专栏</router-link>更新 80w+ 字，讲解图 3365+，欢迎<router-link to="/column/try" class="announcement-link">点击试读</router-link>，卓体项目和微服务项目都能学习！
      </span>
      <el-button type="text" class="close-btn" @click="closeAnnouncement">
        <el-icon><Close /></el-icon>
      </el-button>
    </div>
  </el-alert>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Bell, Close } from '@element-plus/icons-vue'

const showAnnouncement = ref(true)

const closeAnnouncement = () => {
  showAnnouncement.value = false
}
</script>

<style scoped>
.announcement {
  margin-bottom: 20px;
}

:deep(.el-alert__content) {
  width: 100%;
}

.announcement-content {
  display: flex;
  align-items: center;
  width: 100%;
}

.announcement-icon {
  margin-right: 8px;
  font-size: 16px;
}

.announcement-text {
  flex: 1;
  font-size: 14px;
}

.announcement-link {
  color: var(--accent-color);
  text-decoration: none;
}

.announcement-link:hover {
  text-decoration: underline;
}

.close-btn {
  margin-left: 10px;
}
</style>
